<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
      .router-link-active,
      .myactive {
        color: red;
        font-weight: 800;
        font-style: italic;
        font-size: 80px;
        text-decoration: underline;
        background-color: green;
      }
      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateX(140px);
      }
      .v-enter-active,
      .v-leave-active {
        transition: all 0.5s ease;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <a href="#/login">登陆</a>
      <!--注意要加#号-->

      <a href="#/register">注册</a>
      <br /><br />
      <!--router-link默认渲染为一个a标签 可以用tag修改-->
      <router-link to="/login" tag="span">登陆</router-link>
      <router-link to="/register">注册</router-link>
      <!--在这是vue-router提供的元素，专门用来当作占位符-->
      <transition mode="out-in">
        <router-view> </router-view>
      </transition>
    </div>
    <script>
      var login = {
        template: "<h1>login</h1>",
      };

      var register = {
        template: "<h1>注册</h1>",
      };
      /*
            1 创建一个路由对象， 当导入vue-router之后，在windows 全局对象中，就有了一个路由的构造函数叫做VueRouter 
            在new路由对象的时候，可以为构造函数传递一个配置对象
        */
      var routerObj = new VueRouter({
        routes: [
          //路由匹配规则
          /*
                每个路由规则都是一个对象，这个规则的对象必须有两个必须的属性
                属性1：path 表示监听哪个路由链接地址
                属性2：component，表示如果路由是前面匹配到的path，则展示component属性对应的组件
            */
          //注意：component的属性值必须是一个组件的模板对象 不能是组件的引用名称

          //{ path: '/', component: login},
          {path: "/", redirect: "/login"},
          {path: "/login", component: login},
          {path: "/register", component: register},
        ],
        linkActiveClass: "myactive",
      });
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //将路由规则对象， 注册到vm实例上，用来舰艇URL地址的变化，然后展示对应的组件

        router: routerObj,
      });
    </script>
  </body>
</html>
